<template>
  <div class="user">
    <h3>{{ name }}</h3>
    <h4>@{{ username }}</h4>
    <p>Email : {{ email }}</p>
    <p>City : {{ address.city }}</p>
    <p>Website : <a 
      :href="'http://'+website" 
      target="_blank"
    >{{ website }}</a></p>
    <nuxt-link 
      to="/costom/user" 
      class="nuxt_link"
    >返回List</nuxt-link>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  mounted() {
    document.title = 'ssr-fy-details'
  },
  validate({ params }) {
    console.log(params)
    return !isNaN(+params.id)
  },
  async asyncData({ params, error }) {
    try {
      const { data } = await axios.get(
        `https://jsonplaceholder.typicode.com/users/${+params.id}`
      )
      return data
    } catch (e) {
      error({ message: 'User Not Found', statusCode: '404' })
    }
  }
}
</script>
<style scoped>
@import '~/assets/style/common.less';
.user {
  text-align: center;
  margin-top: 100px;
  font-family: sans-serif;
}
p {
  line-height: 2;
}
</style>
